
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>换乘查询</title>
	<meta http-equiv="cleartype" content="on">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale =1">
	<meta name="apple-mobile-web-app-title" content="公交">
	<meta name="description" content=" 最精准的实时公交app">
	<meta name="keywords" content="实时公交">
	<meta name="renderer" content=webkit>
	<meta name="force-rendering" content="webkit">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content=" 320">
	<meta name="screen-orientation" content="portrait">
	<meta name="x5-orientation" content="portrait">
	<meta name="format-detection" content=" telephone=no; address=no;email =no;">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<meta name="mobile-web-app-capable" content="yes">

	<meta name="x5-fullscreen" content="true">
	<meta name="browsermode" content="application">
	<meta name="x5-page-mode" content="app">

	<link href="../css/mui.min.css" rel="stylesheet" />
	<link href="../fonts/iconfont.css" rel="stylesheet" />
	<link href="../css/common.css" rel="stylesheet" />
	<link href="../css/bns.css" rel="stylesheet" />
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
	<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1264016_8le7ji875gy.css"> -->
	<link rel="stylesheet" href="../icon/iconfont.css">
	<script src="../icon/iconfont.js"></script>
</head>

<body style="background-color:#fff;">

	<div class="mui-content" id="line-search">
		<div class="line-search-top">
			<!-- <a class="gz-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<button class="iconfont iconweizhi" id="sname-btn" onclick="searchAddress(0)"></button>
			<button class="iconfont iconweizhi" id="ename-btn" onclick="searchAddress(1)"></button>
			<div class="line-search">
				<div class="dashde-line"></div>
				<input type="search" id='sname' class="mui-input-clear search" placeholder="我的位置">
				<!-- onfocus="this.select()" 获得焦点全选-->
				<input type="search" id="ename" class="mui-input-clear search" placeholder="你要去哪儿">
				<div class="sort">
					<img src="https://cdn.jsdelivr.net/gh/iamwindqi/iamwindqi.github.io@latest/2021-01/243f20ced85b0ac09fe57e0b951a750a.jpg" />
				</div>
			</div>
			<div class="choose-tab">
				<div class="tab active" data-type="0"> 推荐线路</div>
				<div class="tab" data-type="3"> 步行少</div>
				<div class="tab" data-type="2"> 换乘少</div>
				<div class="tab" data-type="0"> 时间短</div>
			</div>
		</div>
		<ul class="mui-table-view" style="height:460px;overflow: auto; ">

		</ul>

	</div>
</body>

</html>
<script src="../js/api.js"></script>
<script src="../js/zepto.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/boot.js"></script>
<script src="../js/map.js"></script>
<script src="../js/components.js"></script>
<!-- <script src="../js/sname.js"></script>
<script src="../js/ename.js"></script> -->

<script type="text/javascript">
	function searchAddress(type) {
		var u = navigator.userAgent,
			app = navigator.appVersion;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		type == 0 ?
			isIOS ? window.webkit.messageHandlers.searchAddress.postMessage(0) : Buspassenger.searchAddress(0) :
			isIOS ? window.webkit.messageHandlers.searchAddress.postMessage(1) : Buspassenger.searchAddress(1);
	};

	function setAddress(type, address) {
		if (type == 0) {
			var m = address;
			var addresss = m.match(/湖南省永州市(\S*)/)[1];
			$("#line-search #sname").val(addresss);
			webApp.pageInit();
		} else {
			var m = address;
			var addresss = m.match(/湖南省永州市(\S*)/)[1];
			$("#line-search #ename").val(addresss);
			webApp.pageInit();
		}
	};
	var webApp = {
		methodInit: {
			onCreatBusDom: function (data) {
				var html = [];
				var len = data.length > 2 ? 2 : data.length
				for (var i = 0; i < len; i++) {
					html.push(data[i].carno);
				}
				return html.join('/');
			},
			onCheckCreatLine: function (data) {
				if (!data) return false;
				for (var i = 0; i < data.length; i++) {
					if (data[i].bus.length > 0) {
						return true;
					}
				}
				return false;
			},
			//问题   查出有总共几条规划路线
			formatData: function (data) {
				var res = {
					plans: []
				};
				if (data && data.plans && data.plans.length > 0) {
					var lines = data.plans;
					for (var i = 0; i < lines.length; i++) {
						var sgmet = lines[i].sgmet; //方案
						var pdata = [];
						for (var j = 0; j < sgmet.length; j++) {
							var item = sgmet[j];
							var line = {};
							var bus = item.bus;
							if (bus) {
								line.via_stops = bus.via_stops;
								var trip = bus.trip;
								var car = [];
								if (trip && trip.length > 0) {
									for (var k = 0; k < trip.length; k++) {
										if (trip[k]) {
											car.push({
												carno: trip[k].carno,
												desc: trip[k].desc
											});
										}
									}
								}
							}
							//							console.log(item)
							line.car = car;
							line.cost = item.cost;
							line.time = item.time;
							line.distance = item.distance;
							line.onedistance = item.onedistance;
							line.twodistance = item.twodistance;
							line.theredistance = item.theredistance;
							line.theredistances = item.theredistances;
							line.theredistancess = item.theredistancess;
							pdata.push(line);
							//res.plans.push(line);
						}
						res.plans.push({
							lines: pdata
						});
					}
				}
				//console.log(res);
				return res;
			},
			//问题  显示时间，路程，站点
			onCreatLinePlan: function (res) {
				//				console.log(res)
				var html = '';
				var data = webApp.methodInit.formatData(res);
				if (data && data.plans && data.plans.length > 0) {
					var plans = data.plans;
					// console.log(plans)
					for (var i = 0; i < plans.length; i++) {
						var carnum;
						var fast = i == 0 ? '<h4><span class="label-type">最快</span></h4>' : '';
						var item = plans[i];
						var lines = item.lines;

						html += '<li class="mui-table-view-cell" data-index="' + i + '">' +
							'<div class="transfer-info">' +
							fast;

						for (var v = 0; v < lines.length; v++) {
							var row = lines[v];
							var car = row.car;
							//console.log(row)
							var distances = row.onedistance + row.theredistance + row.twodistance + row.theredistances + row
								.theredistancess;
							// console.log(distances)
							if (distances >= 1000) {
								distances = (distances / 1000).toFixed(1) + 'km';
							} else {
								distances = distances + 'm';
							}
							if (v == 0) {
								html += '<h4 class="gz-app-font-16 gz-app-font-black">' +
									row.time +
									'<em style="font-size:12px;padding-left: 10px;color: #795548;">里程' +
									row.distance +
									'</em>' +
									'<em style="font-size:12px;padding-left: 10px;color: #795548;"> 步行' +
									distances +
									'</em></h4>' +
									'<h4 class="gz-app-font-16 line-transfer">';
							}
							for (var j = 0; j < car.length; j++) {
								var bus = car[j];
								var car_html = bus.carno;
								var triangle = v == 0 ? '' : '<span class="grag-triangle"></span>';
								html += triangle + '<span class="line-num">';
								html += '<img src="https://cdn.jsdelivr.net/gh/iamwindqi/iamwindqi.github.io@latest/2021-01/243f20ced85b0ac09fe57e0b951a750a.jpg" />';
								html += car_html;
								html += '</span>';
								carnum = car_html;
							}
							//console.log(bus);
							if (v == (lines.length - 1)) {
								html += '</h4>';
							}

						}
						html += '</div>' +
							'</li>';
					}
				} else {
					html += wbComMethod.showNullInfoMsg('暂无乘车路线！');
				}
				wbComMethod.loadMask.hide();
				$("#line-search .mui-table-view").html(html);
				//console.log(data);
			},

			//能拿到输入站点
			onLoadData: function (type) {
				wbComMethod.loadMask.show();
				var sname = $("#sname").val();
				var ename = $("#ename").val();
				if (sname == '' || ename == '') {
					var html = wbComMethod.showNullInfoMsg('暂无乘车路线！');
					$("#line-search .mui-table-view").html(html);
					wbComMethod.loadMask.hide();
					return;
				}
				//console.log(sname);
				//console.log(ename);

				mapTool.onTransferPlan({
					sname: sname,
					ename: ename,
					type: type || 0,
					callback: function (res) {
						webApp.methodInit.onCreatLinePlan(res);
					}
				});
			},

			onCreatSearchPanel: function (res, top, _this) {
				if ($("body").find(".vague-search").length > 0) {
					$("body").find(".vague-search").remove();
				}
				if (!res || res.length < 1)
					return;

				var html = '<ul class="vague-search" style="top: ' + top + 'px;">';
				for (var i = 0; i < res.length; i++) {
					html += '<li><i class="icon iconfont icon-dingwei"></i>' + res[i].name + '</li>';
				}
				html += '</ul>';
				$(_this).before(html);
			}
		},

		eventInit: function () {
			//查看详情跳转页面取原界面的值
			$('#line-search .mui-table-view').on('click', '.mui-table-view-cell', function () {
				var index = $(this).index();
				var type = $("#line-search .choose-tab .tab.active").attr('data-type');
				var sname = $("#sname").val();
				var ename = $("#ename").val();
				//console.log(index);
				//console.log(type);
				//console.log(sname);
				//console.log(ename);

				wbComMethod.openNewWin({
					url: staticConfig.pageUrl.transferDetail,
					params: 'sname=' + sname + '&ename=' + ename + '&type=' + type + '&index=' + index,
				});
			});

			//通过键盘事件搜索
			$("#line-search .search").on('keypress', function (e) {
				var keycode = e.keyCode;
				if (keycode == '13') {
					e.preventDefault();
					//请求搜索接口
					var type = $("#line-search .choose-tab .tab.active").attr('data-type');
					webApp.methodInit.onLoadData(type);
				}
				//console.log(keycode);
			});

			//通过input输入拿到站点对象,没问题
			$("#line-search .search").on('input', function (e) {
				e = e || window.event;
				var top = $(e.target).offset().top + $(e.target).height();
				var val = $(e.target).val();
				mapTool.onGetKeyWord(val, function (res) {
					webApp.methodInit.onCreatSearchPanel(res, top, e.target);
					//console.log(res);

				})
			});
			//通过赋值type，取查询路线的类型，没问题
			$("#line-search .choose-tab").on('click', '.tab', function () {
				var type = $(this).attr('data-type');
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
				webApp.methodInit.onLoadData(type);
				//console.log(type);
			});

			//切换换乘的起点与终点，没问题
			$("#line-search .sort").on('click', function () {
				var type = $("#line-search .choose-tab .tab.active").attr('data-type');
				var sname = $("#sname").val();
				var ename = $("#ename").val();
				$("#sname").val(ename);
				$("#ename").val(sname);
				webApp.methodInit.onLoadData(type);
			});


			$("#line-search").on('click', '.vague-search li', function () {
				var val = $(this).text();
				$(this).parent("ul").next(".search").val(val);
				$(this).parent("ul").remove();
				var type = $("#line-search .choose-tab .tab.active").attr('data-type');
				webApp.methodInit.onLoadData(type);
				//console.log(val);
			});
		},
		pageInit: function () {
			this.eventInit();
			mapTool.onImport(function (ctx) {
				webApp.methodInit.onLoadData();
			});
		},
	};

	window.onload = function () {
		webApp.pageInit();
		wbComMethod.loadMask.show();
	};
</script>
